<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<title>Document</title>
	<style>
		html {
			height : 100%;
			width : 100%;
			-webkit-user-select: none;
		}
	
		body {
			height : 100%;
			width : 100%;
			color : #333;
			font: 14px/18px verdana;
			padding : 0;
			margin : 0;
		}
		
		#main {
			position : relative;
			overflow-x: hidden;
		}
		
		#mid {
			position : absolute;
			z-index : 9;
			background : #fefefe;
		}
		
		#lf {
			position : absolute;
			background : #fefefe;
			top : 0;
			left : 0;
			z-index : 1;
		}
		
		#rt {
			position : absolute;
			top : 0;
			right : 0;
			background : #fefefe;
			z-index : 1;
		}
		
		ul{
			list-style-type : none;
			padding : 0;
			margin : 0;
		}
		
		#ctnt {
			position : relative;
			left : 0;
			top : 0;
		}
		
		#list {
			position : relative;
			left : 0;
			top : 0;
			background-color : #fff;
			border: 1px solid #fff;
			box-shadow: 0px 0px 8px #ccc;
			overflow-y : auto;
		}
		
		#figure {
			position : relative;
		}
		
		#figure #icon {
			-webkit-tap-highlight-color: rgba(0,0,0,0);
			position : absolute;
			top : 1em;
			right : 1em;
			width: 32px;
		}

		#figure img {
			width: 100%;
			vertical-align : middle;
		}

		#list li {
			position : relative;
			overflow : hidden;
			padding : 1em 0;
			margin : 0 1em;
			border-bottom: 1px dashed #f4f4f4;
		}

		#list li span {
			float : left;
			margin: 0.5em 5em 0.5em 0;
			height : 3em;
			overflow : hidden;
		}

		#list li img {
			position: absolute;
			right: 0em;
			top: 1em;
			height: 4em;
		}
		
		#loading {
			position : absolute;
			top : 0;
			left : 0;
			width : 100%;
		}
		
		#loading #circle {
			display : block;
			width : 30px;
			margin : 0.5em auto;
		}
		
		#lf {
			padding-top: 2em;
			background : mediumseagreen;
			color : #fff;
		}
		
		#lf li{
			line-height : 48px;
			height : 48px;
			margin : 0 1em;
			border-bottom : 1px dashed rgba(255,255,255,0.5);
		}
		
		#lf li img {
			width : 30px;
			vertical-align : middle;
		}
		
		#lf li span {
			vertical-align : bottom;
			padding-left : 1em;
		}
		
		#rt {
			padding-top: 2em;
			background : mediumseagreen;
		}
	</style>
</head>
<body>
	<div id="main">
		<section id="lf">
			<ul>
				<li>
					<img src="res/1.png"><span>CANDY</span>
				</li>
				<li>
					<img src="res/2.png"><span>CLOCK</span>
				</li>
				<li>
					<img src="res/3.png"><span>CLOUD</span>
				</li>
				<li>
					<img src="res/4.png"><span>DILIVERY</span>
				</li>
				<li>
					<img src="res/5.png"><span>COLLECT</span>
				</li>
			</ul>
		</section>
		<section id="mid">
			<div id="loading">
				<canvas id="circle" width="30" height="30">
					您的浏览器不支持canvas！
				</canvas>
			</div>
			<div id="ctnt">
				<div id="figure">
					<img src="res/cat.jpg" alt="">
					<img id="icon" src="res/1.png" alt="">
				</div>
				<ul id="list">
					<li>
						<span>为什么有传闻中国政府要推动银行弃用 IBM 高端服务器？</span><img src="res/2.png" alt="">
					</li>
					<li>
						<span>如何看待无印良品（MUJI）把长板凳卖到 1000 块钱？</span><img src="res/3.png" alt="">
					</li>
					<li>
						<span>如何评价山田洋次 2014 年的电影《小小的家》？</span><img src="res/4.png" alt="">
					</li>
					<li>
						<span>因扎吉出任米兰主教练前景如何？</span><img src="res/5.png" alt="">
					</li>
					<li>
						<span>在京沪穗一辈子租房住现实吗？</span><img src="res/6.png" alt="">
					</li>
					<li>
						<span>如何看待女作家六六的这条微博？</span><img src="res/7.png" alt="">
					</li>
					<li>
						<span>在京沪穗一辈子租房住现实吗？</span><img src="res/8.png" alt="">
					</li>
					<li>
						<span>二十几岁的男生，想要的太多，怎么办？</span><img src="res/9.png" alt="">
					</li>
					<li>
						<span>为什么欧美车开起来有“稳”的感觉，而日系车会感觉“飘”？</span><img src="res/10.png" alt="">
					</li>
					<li>
						<span>比较一下商业产品经理和用户产品经理？</span><img src="res/11.png" alt="">
					</li>
				</ul>
			</div>
		</section>
		<section id="rt">
		</section>
	</div>
	<script src="touch.js"></script>
	<script src="move.js"></script>
	<script src="snap.js"></script>
</body>
</html>